<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            padding: 5px;
            margin: 5px;
        }

        button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 300px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div id="root">
    <button>中国</button>
    <button>日本</button>
    <button>韩国</button>
    <div>中国新闻</div>
    <div>日本新闻</div>
    <div>韩国新闻</div>
</div>
</body>
<script>
    const btns = document.querySelectorAll("#root button");
    const divs = document.querySelectorAll("#root div");
    let activeIndex = 2;// 选中的下标
    // 1
    // for(let i=0;i<btns.length;i++){
    //     btns[i].onclick = function(){
    //         // 将所有的按钮中的className清除掉
    //         for(let j=0;j<btns.length;j++){
    //             btns[j].className = null;
    //         }
    //         this.className = "active";
    //     }
    // }
    // btns[activeIndex].className= "active";


    // 2
    // for(let i=0;i<btns.length;i++){
    //     btns[i].onclick = function(){
    //         // 1- 将当前选中的样式移除掉
    //         btns[activeIndex].className = null;
    //         // 2- 将当前点击的按钮增加样式
    //         this.className = "active";
    //         // 3- 将当前点击按钮的下标作为当前被选中的下标
    //         activeIndex = i;
    //     }
    // }

    // 3
    btns.forEach((btn,i)=>{
        divs[i].style.display="none";
        btn.onclick = function(){
            // 1- 将当前选中的样式移除掉,将当前显示的div隐藏
            btns[activeIndex].className = null;
            divs[activeIndex].style.display = "none";
            // 2- 将当前点击的按钮增加样式,将对应的div显示
            this.className = "active";
            divs[i].style.display = "block";
            // 3- 将当前点击按钮的下标作为当前被选中的下标
            activeIndex = i;
        }
    })
    btns[activeIndex].className= "active";
    divs[activeIndex].style.display = "block";
</script>
</html>